import { Button, Icon, Progress } from '@fomantic-react/main';
import { useEffect, useState } from 'react';

export default () => {
  const [num, setNum] = useState(23);
  useEffect(() => {
    if (num < 0) {
      setNum(0);
    } else if (num > 100) {
      setNum(100);
    }
  }, [num]);
  return (
    <>
      <Progress percentage={num}>
        <Progress.Bar color="blue" progress="{percent}%" />
        <Progress.Label>Tickets</Progress.Label>
      </Progress>
      <Button.Group>
        <Button color="red" icon basic onClick={() => setNum(num - Math.ceil(Math.random() * 10))}>
          <Icon name="minus" />
        </Button>
        <Button color="green" icon basic onClick={() => setNum(num + Math.ceil(Math.random() * 10))}>
          <Icon name="plus" />
        </Button>
      </Button.Group>
    </>
  );
};
